<template>
  <div class="scroll-wrapper">
    <van-pull-refresh v-model="isPullLoading" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      loading-text="数据正在赶来"
      finished-text="到底了"
      @load="onLoad"
    >
      <van-cell v-for="article in list"
      :key="article.art_id.toString()"
      :title="article.title"
      @click="$router.push('/article/' + article.art_id.toString())"
      >
       <div slot="label">
          <!-- 图片区域 -->
          <van-grid :column-num="article.cover.images.length">
            <van-grid-item
              v-for="(value,idx) in article.cover.images"
              :key="idx"
            >
              <van-image
              lazy-load
              :src="value" />
            </van-grid-item>
          </van-grid>
          <!-- 文字区域 -->
          <div class="meta">
            <span>{{article.aut_name}}</span>
            <span>{{article.comm_count}}评论</span>
            <span>{{article.pubdate | time}}</span>
            <span class="close"
              v-if="$store.state.tokenInfo.token"
              @click.stop="hShowMoreAction(article)"
              >
              <van-icon name="cross"></van-icon>
            </span>
          </div>
        </div>
      </van-cell>
    </van-list>
    </van-pull-refresh>
    <!-- 更多操作-弹层 -->
    <van-popup v-model="isShowMoreAction" :style="{ width: '80%' }">
      <more-action
      @un-like="hUnlike"
      ref="moreAction"
      @report="hReport"
      ></more-action>
    </van-popup>
  </div>
</template>

<script>
import { getArticles, unLike, report } from '@/api/article.js'
import MoreAction from './moreAction.vue'
export default {
  name: 'ArticleList',
  props: ['channel'],
  components: {
    MoreAction
  },
  data () {
    return {
      articleId: '',
      timestamp: Date.now(),
      list: [], // 数据项
      isPullLoading: false, // 是否正在下拉刷新
      isShowMoreAction: false, // 是否显示弹层组件
      loading: false, // 是否正在加载...
      finished: false // 是否所有的数据全部加载完成
    }
  },
  created () {
    // 创建组件完成，会自动调用created
    console.log(Date.now(), this.channel)
  },
  methods: {
    async hReport (reportTypeId) {
      try {
        const res = await report(this.articleId, reportTypeId)
        console.log(res)
        this.$toast.success('操作成功')
      } catch (err) {
        console.log(err)
        this.$toast.fail('操作失败')
      }
      this.delArticle(this.articleId)
      this.isShowMoreAction = false// 关闭弹层
    },
    async hUnlike () {
      try {
        const res = await unLike(this.articleId)
        console.log(res)
        this.$toast.success('操作成功')
      } catch (err) {
        console.log(err)
        this.$toast.fail('操作失败')
      }
      this.delArticle(this.articleId)
      this.isShowMoreAction = false// 关闭弹层
    },
    delArticle (articleId) {
      const idx = this.list.findIndex((article) => {
        return article.art_id.toString() === articleId
      })
      if (idx !== -1) {
        this.list.splice(idx, 1)
      }
    },
    hShowMoreAction (article) {
      this.isShowMoreAction = true
      this.articleId = article.art_id.toString()
      if (this.$refs.moreAction) {
        this.$refs.moreAction.isReport = false
      }
    },
    // 下拉刷新，去获取最 新 的数据，添加到列表中
    async onRefresh () {
      // 1.发ajax请求，获取 最 新 的 数据
      const res = await getArticles(this.channel.id, Date.now())
      console.log(res)
      const arr = res.data.data.results
      // 2. 把数据添加到list中
      // arr是一个对象数组，...是展开运算符，这样会把arr数组中元素一一追加到list中
      // unshift是把数据放在数组的头部
      this.list.unshift(...arr)
      // 3. 更新loading
      this.isPullLoading = false
    },
    async onLoad () {
      // 1.发ajax请求，获取数据
      const res = await getArticles(this.channel.id, this.timestamp)
      console.log(res)
      const arr = res.data.data.results

      this.timestamp = res.data.data.pre_timestamp
      // 2. 把数据添加到list中
      // arr是一个对象数组，...是展开运算符，这样会把arr数组中元素一一追加到list中
      this.list.push(...arr)

      // 3. 把loading手动设置为false: 加载状态结束
      this.loading = false

      // 4. 数据全部加载完成
      if (arr.length === 0) {
        this.finished = true
      }
    }
  }
}
</script>

<style scoped lang='less'>
.meta {
  span{
    margin-right: 10px;
  }
  display:flex;
  .close{
    // 让它在最右边
    // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
    // 的最右边
    margin-left:auto;
  }
}
</style>
